<template>
  <div class="main">
    <div class="nav-box">
      <div class="module flex" @click="navTo(1,10)">
        <image class="module-pic" src="/static/images/add-minus.png" mode="aspectFit" />
        <div class="info">10以内加减法练习</div>
      </div>
      <div class="module flex" @click="navTo(1,20)">
        <image class="module-pic square" src="/static/images/add-minus2.png" mode="aspectFit" />
        <div class="info">20以内加减法练习</div>
      </div>
      <div class="module flex" @click="navTo(2)">
        <image class="module-pic square" src="/static/images/multi.png" mode="aspectFit" />
        <div class="info">乘法练习</div>
      </div>
      <div class="module flex" @click="navTo(3)">
        <image class="module-pic square" src="/static/images/hunhe.png" mode="aspectFit" />
        <div class="info">加减乘除混合运算练习</div>
      </div>
    </div>
    <i-button @click="navTo(1,10)" type="primary" shape="circle">开始练娃</i-button>
    <div class="tip">已有{{userCnt}}名家长使用口算助手练娃</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userCnt: 0,
    }
  },
  methods: {
    navTo(type, range) {
      let params = '?type=' + type
      if (range) {
        params += '&range=' + range
      }
      mpvue.navigateTo({
        url: '/pages/practice/main' + params,
      })
    },
  },
  onShow() {},
  onReachBottom() {},
  onShareAppMessage() {},
  onShareTimeline() {},
  mounted() {
    wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] })
  },
  created() {
    wx.cloud.callFunction({
      name: 'add_user',
      data: {},
    })

    wx.cloud
      .callFunction({
        name: 'total_user',
        data: {},
      })
      .then(res => {
        this.userCnt = res.result
      })
  },
}
</script>

<style lang="less" scoped>
page {
  background: #fff;
}
.main {
  padding: 0 10px;
  .nav-box {
    margin-top: 30rpx;
    .module {
      margin: 0 40rpx 40rpx 40rpx;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
      border-radius: 26rpx;
      align-content: flex-start;
      padding: 40rpx;
      .module-pic {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        &.square {
          border-radius: 0;
        }
      }
      .info {
        margin-left: 30rpx;
        color: #212121;
        font-size: 28rpx;
        font-weight: bold;
        align-self: center;
      }
    }
  }
  .tip {
    margin-top: 15px;
    text-align: center;
    color: #f09820;
    font-size: 12px;
  }
}
</style>
